<!--搜索页-->
<template lang="pug">
  kalix-master
    div
      div.searchTop
        div.searchPage
          div.cearchLeft
            img(src="/static/PublicCourse/搜索_u976.png")
            input(v-model="searchStr" placeholder="请输入搜索的内容" @input="cearchInput")
          span.searchSpan(@click="btn") 搜索
        div.HotSearch
          span.theKey 热搜关键词 :&nbsp;
          span 待定
          span 待定
          span 待定
          span 待定
          span 待定
      div.zonghe
        div.zonghe-left
          div.sort
            div.sort-paixu
              ul
                li( v-for="(item,index) in items"  @click="isName(item,index)"  :class="index === isIndex?'Greens':''") {{ item.title }}
              span 共找到
              span.green {{allcourse.length}}
              span 个相关内容
          <!--课程视频连接-->
          ul.shipin-ul
            li.shipin-li(v-for="(item,index) in allcourse.slice((currentPage-1)*pagesize,currentPage*pagesize)" v-if="isIndex === item.isShow||isIndex === 0")
              div.shipin
                div.shipinKcheng
                  div.tupian
                    router-link(v-bind:to ="{name:'VideoPage', params: {id: item.id}}")
                      img(:src="item.photo")
                      span.keshi 课时:{{item.classHour}}
                      span.xuefen 学分:{{item.credit}}
                      span.img-title {{item.gname}}
                  p.mingcheng
                    a(href="#").jianjie 课程名称：{{item.name}}
                  p
                    a(href="#").jianjie 教师名称：{{item.uname}}
                  p
                    a(href="#").jianjie 专业名称：{{item.dname}}
                  p
                    a( href="#" class="jianjie").jianjie 课程简介：{{item.introduction}}
            li.shipin-li(v-for="(item,index) in gongkai.slice((currentPage-1)*pagesize,currentPage*pagesize)" v-if="isIndex === item.isShow||isIndex === 1")
              div.shipin
                div.shipinKcheng
                  div.tupian
                    router-link(v-bind:to ="{name:'VideoPage', params: {id: item.id}}")
                      img(:src="item.photo")
                      span.keshi {{item.classHour}}
                      span.xuefen {{item.credit}}
                      span.img-title {{item.gname}}
                  p.mingcheng
                    a(href="#") {{item.name}}
                  p
                    a( href="#" class="jianjie").jianjie {{item.introduction}}
            li.shipin-li(v-for="(item,index) in jingpin.slice((currentPage-1)*pagesize,currentPage*pagesize)" v-if="isIndex === item.isShow||isIndex === 2")
              div.shipin
                div.shipinKcheng
                  div.tupian
                    router-link(v-bind:to ="{name:'VideoPage', params: {id: item.id}}")
                      img(:src="item.photo")
                      span.keshi {{item.classHour}}
                      span.xuefen {{item.credit}}
                      span.img-title {{item.gname}}
                  p.mingcheng
                    a(href="#") {{item.name}}
                  p
                    a( href="#" class="jianjie").jianjie {{item.introduction}}
            li.shipin-li(v-for="(item,index) in weike.slice((currentPage-1)*pagesize,currentPage*pagesize)" v-if="isIndex === item.isShow||isIndex === 3")
              div.shipin
                div.shipinKcheng
                  div.tupian
                    router-link(v-bind:to ="{name:'VideoPage', params: {id: item.id}}")
                      img(:src="item.photo")
                      span.keshi {{item.classHour}}
                      span.xuefen {{item.credit}}
                      span.img-title {{item.gname}}
                  p.mingcheng
                    a(href="#") {{item.name}}
                  p
                    a( href="#" class="jianjie").jianjie {{item.introduction}}
            li.shipin-li(v-for="(item,index) in zhibo.slice((currentPage-1)*pagesize,currentPage*pagesize)" v-if="isIndex === item.isShow||isIndex === 4")
              div.shipin
                div.shipinKcheng
                  div.tupian
                    router-link(v-bind:to ="{name:'VideoPage', params: {id: item.id}}")
                      img(:src="item.icon")
                  p.mingcheng
                    a(href="#") {{item.name}}
          div.paging
            el-pagination(
            @current-change="current_change"
            layout="prev, pager, next"
            :total="total")
        div.zonghe-right
          h2 相关搜索内容推荐
          ul
            li
              div.teacher-right
                div.kecheng-name1(v-for="item in hotlistscourse")
                  router-link(v-bind:to ="{name:'VideoPage', params: {id: item.cid}}")
                    div.kecheng-img.clearfix
                      img(:src="item.photo")
                    div.kecheng-right
                      p.tt 课程名称: {{item.cname}}
                      p.tt 教师名称: {{item.uname}}
                      p.tt 课程简介: {{item.introduction}}
                    div.clear
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        searchStr: null,
        isIndex: 0,
        isBottom: false,
        items: [
          {title: '全部'},
          {title: '公开课'},
          {title: '精品课'},
          {title: '微课'},
          {title: '直播课'}
        ],
        allcourse: [],
        gongkai: [],
        jingpin: [],
        weike: [],
        zhibo: [],
        hotlistscourse: [],
        total: null, // 默认数据总数
        pagesize: 12, // 每页的数据条数
        currentPage: 1 // 默认开始页面
      }
    },
    mounted() {
      this.searchStr = this.$route.params.name || this.$route.params.content
      this.btn()
      this.getHotlistsAll()
    },
    methods: {
      current_change(currentPage) {
        this.currentPage = currentPage
      },
      isName(item, index) {
        this.isIndex = index
        if (index === 0) {
          this.total = this.allcourse.length / this.pagesize * 10
        } else if (index === 1) {
          this.total = this.gongkai.length / this.pagesize * 10
        } else if (index === 2) {
          this.total = this.jingpin.length / this.pagesize * 10
        } else if (index === 3) {
          this.total = this.weike.length / this.pagesize * 10
        } else if (index === 4) {
          this.total = this.zhibo.length / this.pagesize * 10
        }
      },
      btn() {
        this.axios.request({
          methos: 'GET',
          url: '/camel/rest/training/course/getAllBySearch',
          params: {
            str: this.searchStr
          }
        }).then(res => {
          // eslint-disable-next-line
          res = eval("(" + res.data + ")")
          this.allcourse = res.allcourse
          this.gongkai = res.gongkai
          this.jingpin = res.jingpin
          this.weike = res.weike
          this.zhibo = res.zhibo
          this.total = this.allcourse.length / this.pagesize * 10
        })
      },
      getHotlistsAll() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/hotlistsCourses/getHotlistsAllData',
          params: {}
        }).then(res => {
          // eslint-disable-next-line
          res = eval("(" + res.data + ")")
          this.hotlistscourse = res.hcData
        })
      },
      cearchInput() {
        if (this.input.length > 0) {
          return 123
        }
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .clearfix::after
    content ""
    clear both
    display block
    overflow hidden
    font-size 0
    height 0

  .searchTop
    width 100%
    height 150px
    background-color #D9DDE1
    margin-top 12px
    padding-top 40px
    box-sizing border-box

  .searchPage
    width 827px
    height 48px
    background-color #fff
    border-radius 5px
    overflow hidden
    margin 0 auto
    position relative
    box-shadow 4px 4px 6px #ccc

  .cearchLeft
    width 728px
    height 48px
    display inline-block
    line-height 48px

  .cearchLeft img
    position absolute
    left 18px
    top 16px

  .cearchLeft input
    border none
    outline none
    margin-left 54px
    width 660px
    height 48px

  .searchSpan
    float right
    width 98px
    height 48px
    line-height 48px
    background-color #008F95
    text-align center
    color #fff
    cursor pointer

  .HotSearch
    width 827px
    height 50px
    margin 0 auto
    margin-top 15px
    font-size 12px

  .theKey
    color #008F95

  .HotSearch span
    margin-right 15px
    color #666

  /*综合排序*/
  .zonghe
    width 1200px
    margin 30px auto
    height 950px

  /*左边*/
  .zonghe-left
    width 66.7%
    height 100%
    float left
    position relative

  .zonghe-left .sort
    width 800px
    height 40px
    box-sizing border-box

  .sort .sort-paixu ul
    display inline-block
    margin-left 40px

  .sort .sort-paixu li
    display inline-block
    height 40px
    line-height 40px
    margin-right 38px
    cursor pointer

  .sort .sort-paixu span
    color #999
    font-size 14px

  .shipin
    display inline-block
    width 170px
    height 250px
    margin-bottom 30px
    background-color #fff

  .shipin-ul
    margin 0
    padding 0
    list-style none
    margin-top 18px

  .shipin-li
    display inline-block
    margin 0 14px 0 14px

  .shipin .shipinKcheng
    position relative

  .shipin .shipinKcheng p
    margin-bottom 14px

  .shipin .shipinKcheng .tupian
    position relative
    width 170px
    height 120px
    border-radius 5px
    overflow hidden

  .shipin .shipinKcheng .tupian img
    width 100%
    height 100%

  .shipin .shipinKcheng .keshi
    position absolute
    left 56px
    bottom 10px
    width 48px
    height 18px
    line-height 18px
    background-color rgba(0, 0, 0, 0.5)
    border-radius 10px
    text-align center
    font-size 12px
    color #fff

  .shipin .shipinKcheng .xuefen
    position absolute
    left 112px
    bottom 10px
    width 48px
    height 18px
    line-height 18px
    background-color rgba(0, 0, 0, 0.5)
    border-radius 10px
    text-align center
    font-size 12px
    color #fff

  //  课程名称
  .mingcheng
    margin-top 20px

  /*课程简介*/
  .jianjie
    color #9999B2
    font-size 14px
    margin-top 10px
    display block /*内联对象需加*/
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  /*查看更多*/

  /*右边*/
  .zonghe-right
    width 30%
    height 100%
    float right

  .zonghe-right h2
    margin-bottom 40px

  .zonghe-right li
    margin-bottom 24px
    color #999

  .tl
    font-size 18px

  .tt
    font-size 14px
    color #99A4B8
    word-break keep-all /* 不换行 */
    white-space nowrap /* 不换行 */
    overflow hidden /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow ellipsis

  .te
    margin-left 16px

  .boot-paging
    border none
    margin-left 166px

  .img-title
    position: absolute
    left -28px
    top 16px
    width 110px
    height 22px
    line-height 22px
    background-color: #33A2FB
    transform rotate(-43deg)
    font-size 12px
    text-align center
    color #fff
    font-weight 700

  .sort .sort-paixu .green
    color #008F95
    font-weight 700

  .Greens
    color #008F95
    border-bottom 2px solid #008F95

  // 分页
  .paging
    position absolute
    left 50%
    bottom 0
    transform translate(-50%)

  .teacher-right
    width 360px

  .kecheng-name1
    width 100%
    height 110px
    background-color #FDF7E6
    border-radius 5px
    overflow hidden
    margin-bottom 20px

  .kecheng-name1 a
    display block
    width 100%
    height 100%

  .kecheng-name1 .kecheng-img
    float left

  .kecheng-img img
    width 110px
    height 110px
    border-radius 4px

  .kecheng-right
    float: left
    width 227px
    margin-left: 15px
    padding-top 16px

  .kecheng-name1 .kecheng-right p
    margin 0
    margin-bottom 14px
</style>
